<template>
	<div class="content">
		<div class="info">
			<img class="pic" :src="userInfoData.head_img" alt="">
			<div class="right">
				<span class="nickname">{{ userInfoData.nickname }}</span>
				<span class="label">
					<img class="safe" src="../../static/safe.png" alt="">
					{{ userInfoData.is_certified == 1 ? '已认证主播' : '普通用户' }}
				</span>
			</div>
		</div>
		<div class="panel">
			<div class="list" @click="toFeedback">
				<div class="name">
					<img class="chat" src="../../static/curved.png" alt="">
					<span>留意反馈</span>
				</div>
			</div>
			<div class="list"  @click="toAnchor">
				<div class="name">
					<img class="chat" src="../../static/square.png" alt="">
					<span>认证主播</span>
				</div>
			</div>
		</div>
		<div class="panel">
			<div class="list" style="border: none;">
				<div class="name">
					<img class="chat" src="../../static/logout.png" alt="">
					<span @click="logout">退出登录</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '../../utils/request'

	export default {
		data() {
			return {
				userInfoData:{}
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			//反馈
			toFeedback(){
				uni.navigateTo({
					url: '/pages/feedback/index'
				});
			},
			//主播
			toAnchor(){
				uni.switchTab({
					url: '/pages/anchor/index'
				});
			},
			//获取用户信息
			async getUserInfo(){
				await uni.getStorage({
					key: 'userInfo',
					success: ({ data }) => {
						this.userInfoData = data
						console.log("🚀 ~ 获取用户信息 ~ data:", data)
					},
					fail: (error) => {}
				})
			},
			async logout(){
				uni.removeStorage({
					key: 'userInfo',
					success: function (res) {
						console.log('success');
					}
				});
				uni.navigateTo({
					url: '/pages/login/index'
				});


			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		background: url('/static/bg.png') center top no-repeat;
		padding: 100px 15px 18px 15px;
		background-size: contain;
		.info {
			display: flex;
			.right {
				display: flex;
				flex-direction: column;
				margin-left: 13px;
				justify-content: flex-start;
			}
			.pic {
				width: 80px;
				height: 80px;
				border: 2px solid #000000;
				border-radius: 50%;
			}
			.nickname {
				margin: 10px 0 0 0;
			}
			.safe {
				width: 12px;
				height: 12px;
				margin: 5px;
			}
			.label {
				width: 93px;
				height: 24px;
				background: linear-gradient( 270deg, rgba(222,55,63,0.9) 0%, rgba(255,105,105,0.9) 100%);
				border-radius: 100px 100px 100px 100px;
				border: 2px solid #000000;
				color: #fff;
				font-size: 12px;
				padding: 2px 5px;
				display: flex;
				align-items: center;
				margin-top: 10px;
			}
		}
		.panel {
			background: #FFFAFA;
			box-shadow: 0px 0px 10px 0px rgba(194,164,164,0.1);
			border-radius: 20px 20px 20px 20px;
			border: 1px solid #FFDCDC;
			margin-top: 20px;
			padding: 0 20px;
			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 17px 0;
				border-bottom: 1px solid #eee;
				.chat {
					width: 28px;
					height: 28px;
					margin-right: 10px;
				}
				.name {
					display: flex;
					align-items: center;
				}
			}
		}
	}


</style>
